
<template>
	<div class="authorize">
		<bread-crumb>我發起的賽事</bread-crumb>
		<div class="uc-body">
			<!--篩選控制-->
			<!--			<h1 class="c-red">條件篩選要實現</h1>-->
			<div class="manage-list-control">
				<el-select size="small" v-model="requestParameter.status" placeholder="投票狀態">
					<el-option
						v-for="item in voteStatus"
						:key="item.status"
						:label="item.title"
						:value="item.status">
					</el-option>
				</el-select>
				<el-input size="small" v-model="requestParameter.infoName" placeholder="標題篩選" clearable></el-input>
				<el-button type="success" size="small" @click="reFresh" >刷新</el-button>
			</div>
			<!--數據-->
			<manage-list
				:data-list="mySponsoredVoteList"
				:timestamp-now="timestampNow"
				@actJumpDetail="actJumpDetail"
			></manage-list>

			<div class="manage-pager">
				<el-pagination
					background layout="prev, pager, next"
					:total="listDataCount"
					:pager-count=5
					:page-size.sync="requestParameter.pageSize"
					:current-page.sync="requestParameter.pageIndex"
					@current-change="handleCurrentChange"
				>
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>

//数据
import breadCrumb from '../components/breadCrumb.vue'
import manageList from "./components/manageList";
import { mixins } from '@/mixins/mixins'
import { mixinsUtils } from '@/mixins/mixins.utils'
import { mixinsManage } from "@/views/manage/js/manage.mixins";
import { contestMixinsGlobal } from '@/views/contestHall/contest.mixins.global'

import {apiMySponsoredVote, tronGetVoteKeyData} from "@/views/uc/manage/js/manage.user.lib";
import util from "@/libs/util";
import {dev} from "@/libs/tron.lib";
import {DATAMAP_VOTE} from "@/views/manage/js/manage.lib";
import { apiRequestGameTron } from "@/views/contestHall/contest.func";


const debounce = util.debounce(1000) //初始化个防抖对象
//列表请求参数初始化
const requestParameterInit =  {
	infoName : '',         //按名称筛选赛事
		pageIndex: 1,         //分页参数
		pageSize : 10,          //分页参数
		status   : '',//状态
}
//导出
export default {
	name      : "manageMySponsored",
	components: { breadCrumb,manageList },
	mixins    : [mixins, mixinsManage,contestMixinsGlobal],
	data () {
		return {
			//////////////////////简单值////////////////////////////
			loading      : false,
			submiting    : false,//是否提交中
			timestampNow : 0,//当前时间戳
			timeHandler:null,//时间控制器
			dialogVisible: false,//显示操作层
			listDataCount:0,//数据列表的数量，用于翻页插件

			//////////////////////复杂值////////////////////////////

			mySponsoredVoteList:[],//投票列表数据

			//列表请求参数（使用的是这个）
			requestParameter: {},

		}
	},
	computed:{
		pageType (){
			return this.$route.query.type
		}
	},
	created () {
		this.requestParameter = {...requestParameterInit} //展开初始化请求参数
		this.getMySponsoredVote() //请求数据
		//时间处理
		this.timestampNow = parseInt((new Date().getTime()) / 1000)
		this.timeHandler = setInterval(() => {
			console.log('重置当前时间')
			// this.timestampNow = parseInt((new Date().getTime()) / 1000)
		}, 5000)
	},
	mounted () {

	},

	methods: {
		//获取我发起的投票
		getMySponsoredVote () {
			//发送请求
			apiMySponsoredVote({
				sender: this.sender,
				type : 'sponsor',
				...this.requestParameter
			}, (res) => {
				if (res.resultFlag) {
					this.listDataCount       = res.count;
					this.mySponsoredVoteList = res.data;
					this.manageListDataHandle(res) //数据处理
				}
			})
		},

		/**
		 * 列表数据处理, 弄这个方法是为了保证上下调用链中的方法尽量干净
		 * 因为要造了“处理列表的实时数据”这个恶业，才会有这个方法
		 * @param res 整个请求结果
		 */
		manageListDataHandle(res){
			dev && console.log('》》》》》》》》》》》》》》》》》》》》》》》数据分发处理方法：')
			//取得所有投票区块id
			let arrGame =  res.data.reduce((ret,cur) => {
				ret.push(cur.proposalId)
				return ret
			},[])

			this.getManageTimelyData(arrGame, this.mySponsoredVoteList)
		},

		getManageTimelyData (voteIds,manageList) {
			dev && console.log('》》》》》》》》》》》》》》》》》》》》》》》数据包装方法：')
			let that = this;
			//从合约中请求数据
			tronGetVoteKeyData(voteIds,this.sender).then((rs) => {

				apiRequestGameTron({
					"type": 1,//1是解析投票数据
					'act': 'returnDataAnalyze',
					"param": rs
				}).then(ret => {
					//解析成功则包装数据，并渲染，否则什么也不干
					if (ret.resultFlag == true) {
						//进行数据包装
						let _analyzing = ret.data.splitList  // 取得解析结果
						let _wrapResult = [...manageList].map((item,index)=> {//由于旧数据可能是经过vue包装的，统一生成个新的数组
							item.statue         = _analyzing[index][DATAMAP_VOTE.STATUS.index] // 状态
							item.forVotes       = _analyzing[index][DATAMAP_VOTE.FAVOUR_COUNT.index] // 当前总赞成票数
							item.againstVotes   = _analyzing[index][DATAMAP_VOTE.OPPOSE_COUNT.index] //当前总反对票
							item.forVotesMy     = _analyzing[index][DATAMAP_VOTE.FAVOUR_COUNT_MY.index] //我的赞成票
							item.againstVotesMy = _analyzing[index][DATAMAP_VOTE.OPPOSE_COUNT_MY.index] //我的反对票
							return item
						})
						dev && console.log('》》》》》》》》》》》》》》》》》》》》》》》数据包装方法：解析成功:',_analyzing)
						dev && console.log('》》》》》》》》》》》》》》》》》》》》》》》数据包装方法：包装后的数据：',_wrapResult)
						this.mySponsoredVoteList = [..._wrapResult]
					}else{
						dev && console.log('》》》》》》》》》》》》》》》》》》》》》》》数据包装方法：解析失败了。。。。。')
					}
				})

			})
		},

		////////////////////////////////////////////////其它交互/////////////////////////////////////////////////
		//刷新，筛选
		reFresh () {
			debounce(()=> {
				this.requestParameter.pageIndex = 0 // 重置当前页
				this.getMySponsoredVote()
			})
		},

		//跳转页码
		handleCurrentChange(val) {
			console.log('跳转页码:',val);
			this.getMySponsoredVote();
		},

		//跳转到详情
		actJumpDetail (id) {
			this.$router.push('MySponsoredDetail?id='+id)
		},

	},

	watch:{
		// pageType: {
		// 	handler (nv, ov) {
		// 		console.log('旧：',ov,'新：',nv)
		// 	},
		// 	deep: false,
		// 	immediate: false
		// }
		//如果下面的方式工作不正常，使用上面的监听变量方式
		'$route' (to, from) { //监听路由是否变化
			if(to.query.type != from.query.type){
				console.log('type参数改变')
				this.mySponsoredVoteList = [] //清空
				this.requestParameter = {...requestParameterInit} //展开初始化请求参数
				setTimeout(() => {
					this.getMySponsoredVote()
				},1000)

			}
		}
	},
	beforeRouteUpdate(to,from,next){
		console.log('哈哈改变了')
		next()
	},
	beforeDestroy () {
		clearInterval(this.timeHandler)
	},
}
</script>

<style lang="less" scoped>
/*公共变量*/
@import '~@/assets/global.less';
//筛选控制
/************************************适应***************************************/
@media screen and (max-width: @MINSCREEN) {

}
</style>
